<template>
  <div class="box">
    <h2>Son2 子组件, {{ msg }}</h2>
    从vuex中获取的值: {{ calculatedCount }}, {{ filtrateArr }} <br />
    <input
      type="text"
      :value="msg"
      @input="twoWayBinding($event.target.value)"
    />
    <button v-on:click="add(1)">值 - 1</button>
    <button v-on:click="add(5)">值 - 5</button>
    <button v-on:click="viewModel(10)">值 - 10</button>
    <button v-on:click="requestData(20)">值 - 20</button>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {};
  },
  methods: {
    // 操作mutations的第一种方法，传递
    add(payload) {
      this.$store.commit("user/addNum", payload);
    },
    // 操作mutations的第二种方法，调用
    ...mapMutations('user', ["viewModel", "twoWayBinding"]),

    // 操作actions的第一种方法，传递
    actionsAdd(payload) {
      // this.$store.dispatch("requestData", payload);
      this.$store.dispatch("user/requestData", payload);
    },
    // 操作actions的第二种方法，调用
    ...mapActions('user', ['requestData'])
  },
  created() {
    this.actionsAdd(1);
    // console.log("created: ", this.$store.state.count);
  },
  computed: {
    // 通过mapState简化写法
    ...mapState('user', ["count", "msg"]),
    // 通过mapGetters简化写法
    ...mapGetters('user', ["calculatedCount", "filtrateArr"]),
  },
};
</script>

<style lang="css" scoped>
.box {
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
  margin-top: 10px;
}
</style>
